import React, {Component} from 'react'
import './index.scss'
import {NavLink, withRouter} from "react-router-dom";
import {connect} from "react-redux";

class TabBar extends Component {
		constructor(props) {
				super(props);
				this.state = {}
		}

		render() {
				return (
						<div id="tabBar">
								{
										this.props.isTabBarShow?
												<div className="container">
														<ul>
																<li>
																		<NavLink to="/" activeClassName="active" replace exact>
																				<span className="iconfont icon-home_light"/>
																				<span className="tabBar-item">首页</span>
																		</NavLink>
																</li>
																<li>
																		<NavLink to="/find" activeClassName="active" replace>
																				<span className="iconfont icon-lvyou1"/>
																				<span className="tabBar-item">发现</span>
																		</NavLink>
																</li>
																<li>
																		<NavLink to="/dest" activeClassName="active" replace>
																				<span className="iconfont icon-location"/>
																				<span className="tabBar-item">目的地</span>
																		</NavLink>
																</li>
																<li>
																		<NavLink to="/custom" activeClassName="active" replace>
																				<span className="iconfont icon-dingzhiyou"/>
																				<span className="tabBar-item">定制游</span>
																		</NavLink>
																</li>
																<li>
																		<NavLink to="/personal" activeClassName="active" replace>
																				<span className="iconfont icon-my"/>
																				<span className="tabBar-item">个人中心</span>
																		</NavLink>
																</li>
														</ul>
												</div>
												:null
								}
						</div>
				)
		}

}

export default withRouter(connect(
		(state) => {
				return {
						isTabBarShow: state.tabBarReducer
				}
		}
)(TabBar))
